<template>
  <edit-dialog :centerDialogVisible="visible" :tilte="tilte" @Cancel="handleCancel" :default-button="false"
    :width="width">
    <template #content>
      <layout-card :filters="dialogOptions" :hasButton="false" :rules="rules">
      </layout-card>
    </template>
    <template #custom>
      <span class="dialog-footer">
        <el-button class="buttonCancel" @click="handleCancel">取消</el-button>
        <el-button class="buttonOk" @click="handleBack">返回</el-button>
        <el-button class="buttonOk" type="primary" @click="handleSave">保存</el-button>
      </span>
    </template>
  </edit-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits, computed } from 'vue'
import editDialog from '@/components/editDialog/index.vue'
import LayoutCard from '@/components/LayoutCard/index.vue'
import { dialogOptions } from '@/views/eqpt/device/config/filters'
import { FormRules } from 'element-plus'
const tilte = ref('新增设施设备')
const emit = defineEmits(['cancel', 'ok', 'back'])
const width = ref('950px')
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const rules = reactive<FormRules>({
  eqptCode: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
  eqptType: [{ required: true, message: '请输入设备类型', trigger: 'blur' }],
  eqptName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  owner: [{ required: true, message: '请输入归属单位', trigger: 'blur' }]
})
/**
   * 取消
   */
const handleCancel = () => {
  emit('cancel')
}
/**
   * 返回上一步
   */
const handleBack = () => {
  emit('back')
}
/**
   * 保存
   */
const handleSave = () => {
  emit('ok')
}
</script>
